<template>
  <div class="affix-body">
    <template v-if="isFixed">
      <a-affix :offset-bottom="0" v-if="Math.ceil(total / 20) > 0">
        <div class="footer-wrapper">
          <div class="footer-left">
            <slot name="left"></slot>
          </div>
          <div class="pagination-section">
            <a
              :class="{ 'disable-class': Math.ceil(total / pageSize) == 1 }"
              @click.prevent="handleClickFirstPage">首页</a>
            <a-pagination
              simple
              style="margin: 0 20px"
              :disabled="Math.ceil(total / pageSize) == 1"
              :current="current"
              :total="total"
              :item-render="itemRender"
              :pageSize="pageSize"
              @change="OnPageChange"
            />
            <a
              :class="{ 'disable-class': Math.ceil(total / pageSize) == 1 }"
              @click.prevent="handleClickLastPage">尾页</a>
            <span class="disable-class" style="margin-left: 10px">共 {{ total }} 条数据</span>
          </div>
          <div class="footer-right">
            <slot name="right"></slot>
          </div>
        </div>
      </a-affix>
    </template>
    <div class="footer-wrapper" v-else>
      <div class="footer-left">
        <slot name="left"></slot>
      </div>
      <div class="pagination-section">
        <a :class="{ 'disable-class': Math.ceil(total / pageSize) == 1 }" @click.prevent="handleClickFirstPage">首页</a>
        <a-pagination
          simple
          style="margin: 0 20px"
          :disabled="Math.ceil(total / pageSize) == 1"
          :current="current"
          :total="total"
          :item-render="itemRender"
          :pageSize="pageSize"
          @change="OnPageChange"
        />
        <a :class="{ 'disable-class': Math.ceil(total / pageSize) == 1 }" @click.prevent="handleClickLastPage">尾页</a>
        <span class="disable-class" style="margin-left: 10px">共 {{ total }} 条数据</span>
      </div>
      <div class="footer-right">
        <slot name="right"></slot>
      </div>
    </div>
  </div>
</template>
<script>
    export default {
        name: 'AffixFooter',
        props: {
            config: {
                type: Object,
                default: () => {
                    return {
                        current: 1,
                        total: 1
                    }
                }
            },
            isFixed: {
                type: Boolean,
                default: true
            }
        },
        data () {
            const config = this.config || {}
            const current = config.current || 0
            const pageSize = config.pageSize || 20
            const total = config.total || 0
            return {
                disabled: false,
                current,
                total,
                pageSize: pageSize
            }
        },
        watch: {
            config: {
                handler (data) {
                    this.current = data.current
                    this.total = data.total
                    this.pageSize = data.pageSize || 20
                },
                immediate: true,
                deep: true
            }
        },
        methods: {
            itemRender (current, type, originalElement) {
                if (type === 'prev') {
                    return <a>上一页</a>
                } else if (type === 'next') {
                    return <a>下一页</a>
                }
                return originalElement
            },
            OnPageChange (page, pageSize) {
                this.$emit('change', {
                    current: page,
                    pageSize
                })
            },
            handleClickFirstPage () {
                this.$emit('change', {
                    current: 1,
                    pageSize: this.pageSize
                })
            },
            handleClickLastPage () {
                const { total, pageSize } = this
                this.$emit('change', {
                    current: Math.ceil(total / pageSize),
                    pageSize: pageSize
                })
            }
        }
    }
</script>
<style lang="less" scoped>
  .footer-wrapper {
    width: 100%;
    height: 50px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /*border: 1px solid red;*/

    .footer-left {
      height: 50px;
      padding-left: 45px;
      box-sizing: border-box;
      position: absolute;
      left: 0;
      top: 0;
    }

    .footer-right {
      height: 50px;
      padding-right: 24px;
      box-sizing: border-box;
      position: absolute;
      right: 0;
      top: 0;
    }

    .pagination-section {
      flex: 0 0 auto;
      display: flex;
      align-items: center;

      & > a {
        color: rgba(0, 0, 0, .65);
      }

      .disable-class {
        color: #d9d9d9;
        cursor: not-allowed;
      }
      .total_class{
        color: #d9d9d9;
        cursor: not-allowed;
      }
    }
  }
</style>
